HTML

Let's Begin Your Journey With HTML

WHAT IS HTML?

HTML stands for HyperText Markup Language.
It is used to create the structure of web pages.
HTML is not a programming language; it is a markup language that tells the browser how to display content.

Key points about HTML:

HTML uses tags to structure content.
It defines elements like headings, paragraphs, images, and links.
Every HTML document starts with <!DOCTYPE html>.
HTML is the foundation of all websites.

In short, HTML tells the browser what to show and how to show it.

HTML Elements

HTML elements are the building blocks of a web page.
An element is made up of a start tag, some content, and an end tag.

Example of an HTML element:

<p>This is a paragraph</p>

💻 Output:

This is a paragraph

Key points about HTML elements:

An element starts with an opening tag (e.g., <p>).
It may contain content inside (e.g., text, images).
It ends with a closing tag (e.g., </p>).
Some elements are empty elements, meaning they don’t need a closing tag (e.g., <br>).

In short: HTML elements define the structure and content of a webpage.

Container Elements (or Container Tags)

Container elements are those HTML elements which have both an opening tag and a closing tag.
They "contain" some content inside them.

Example:

<p>This is a paragraph</p>
<div>This is a division block</div>

💻 Output:

This is a paragraph

This is a division block

Key points about container elements:

A container element always has a start tag and an end tag.
Content (like text, images, or other elements) goes inside the container.
Examples: <p></p>, <div></div>, <h1></h1>, <ul></ul>.

In short: Container elements are used to wrap content inside them.

Empty Elements (or Empty Tags)

Empty elements are HTML elements that do not have a closing tag.
They are self-contained and are used to insert content or structure into the page without wrapping anything inside.

Examples of empty elements:

<br> - Inserts a line break
<hr> - Inserts a horizontal rule
<img src="lwa.jpg" alt="Example Image"> - Inserts an image

💻 Output:

Line 1
Line 2 after break

Here is an image:

Key points about empty elements:

Empty elements do not have closing tags.
They are used to insert something into the page (like line breaks, images, or horizontal rules).
Examples: <br>, <hr>, <img>.

In short: Empty elements are self-contained tags that do not wrap any content.

HTML Attributes

HTML attributes give extra information about an element.
They are always written inside the opening tag in the format name="value".

Example:

<h1 align="center">Welcome</h1>

💻 Output:

Welcome

👉 In this example:

h1 → HTML tag
align → Attribute Name
center → Attribute Value

Key Points:

Attributes are written inside the opening tag.
They give extra meaning or properties to the element.
Always written in the format: name="value".

More Common Attributes:

<img src="lwa.jpg" alt="Website Logo" width="200">
<a href="https://www.example.com" target="_blank">Visit</a>

💻 Output:

Visit

Basic HTML Tags

HTML tags are used to define elements on a webpage. They are usually written as <tagname>content</tagname>.

Common Basic HTML Tags:

<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
<p>This is a paragraph.</p>
<br> - Inserts a line break
<hr> - Inserts a horizontal line
<b>Bold Text</b>
<i>Italic Text</i>
<u>Underlined Text</u>
<img src="lwa.jpg" alt="Logo">

💻 Output:

This is a Heading 1

This is a Heading 2

This is a paragraph.

Line before break
Line after break

Bold Text

Italic Text

Underlined Text

Key Points:

HTML tags define the content and structure of a webpage.
Most tags have an opening and closing tag.
Some tags are empty tags (like <br>, <hr>, <img>).
Basic tags include headings (<h1>-<h6>), paragraphs (<p>), links (<a>), and images (<img>).

Basefont Tag (<basefont>) - Deprecated

The <basefont> tag was used to set a default font size, color, and face for the entire webpage.
Note: This tag is deprecated in HTML 4.01 and not supported in HTML5. It is recommended to use CSS instead.

<basefont size="4" color="blue" face="Arial">

<p>This paragraph will use the base font settings.</p>

💻 Output:

This paragraph will use the base font settings.

Key Points:

<basefont> sets default font size, color, and face for the page.
This tag is deprecated and should be replaced with CSS (font-family, color, font-size).
Example CSS replacement: body { font-family: Arial; color: blue; font-size: 16px; }

HTML Comment Tag ()

The  tag is used to add comments in HTML.
Comments are not displayed in the browser, but are visible in the source code.
They are useful for notes, explanations, or reminders in your HTML code.

<!-- This is a comment -->
<p>This paragraph will be displayed.</p>
<!-- Comments do not appear in the browser -->

💻 Output:

This paragraph will be displayed.

Key Points:

HTML comments start with .
Anything inside the comment is ignored by the browser.
Useful for explaining code or temporarily hiding code.

Example Use: You can write reminders for yourself or explain complex parts of your code.

Body Tag Attributes

1. bgcolor Attribute

Purpose: Sets the background color of the page.

<body bgcolor="lightblue">
  <h1>Welcome to My Website</h1>
  <p>This page has a light blue background.</p>
</body>

Welcome to My Website

This page has a light blue background.

2. text Attribute

Purpose: Sets the default text color for the page.

<body text="darkred">
  <h1>Welcome</h1>
  <p>This text is dark red.</p>
</body>

Welcome

This text is dark red.

3. background Attribute

Purpose: Sets a background image for the page.

<body background="background.jpg">
  <h1>My Website</h1>
  <p>This page has a background image.</p>
</body>

My Website

This page has a background image.

4. Using Hexadecimal Colors

Purpose: Set precise colors using hex codes for background and text.

<body bgcolor="#ffffe0" text="#00008b">
  <h1>Hex Color Example</h1>
  <p>Background is light yellow, text is dark blue.</p>
</body>

Hex Color Example

Background is light yellow, text is dark blue.

Body Tag Margins (Left, Right, Top, Bottom)

The margin is the space outside the element. You can set margins using CSS inside the style attribute of the <body> tag.

1. Top Margin

<body style="margin-top:50px;">
  <h1>Top Margin Example</h1>
</body>

Top Margin Example

2. Bottom Margin

<body style="margin-bottom:50px;">
  <h1>Bottom Margin Example</h1>
</body>

Bottom Margin Example

3. Left Margin

<body style="margin-left:50px;">
  <h1>Left Margin Example</h1>
</body>

Left Margin Example

4. Right Margin

<body style="margin-right:50px;">
  <h1>Right Margin Example</h1>
</body>

Right Margin Example

5. All Margins Together

<body style="margin:50px;">
  <h1>All Sides Margin Example</h1>
</body>

All Sides Margin Example

Text Formatting Tags

Text formatting tags are used to change the appearance or style of text in HTML.

1. <font> Tag

Purpose: Sets font size, color, and face. (Deprecated in HTML5, use CSS instead)

<font color="blue" size="5" face="Arial">Hello World</font>

Hello World

2. <b> Tag

Purpose: Makes text bold.

<b>Bold Text</b>

Bold Text

3. <i> Tag

Purpose: Makes text italic.

<i>Italic Text</i>

Italic Text

4. <u> Tag

Purpose: Underlines the text.

<u>Underlined Text</u>

Underlined Text

5. <em> Tag

Purpose: Emphasizes text (usually italic).

<em>Emphasized Text</em>

Emphasized Text

6. <mark> Tag

Purpose: Highlights text.

<mark>Highlighted Text</mark>

Highlighted Text

7. <strong> Tag

Purpose: Makes text bold and indicates strong importance.

<strong>Strong Text</strong>

Strong Text

8. <tt> Tag

Purpose: Displays text in teletype or monospace font (deprecated).

<tt>Teletype Text</tt>

  Teletype Text

9. <big> Tag

Purpose: Increases text size slightly.

<big>Big Text</big>

Big Text

10. <small> Tag

Purpose: Decreases text size slightly.

<small>Small Text</small>

Small Text

11. <pre> Tag

Purpose: Displays text in preformatted form keeping spaces and line breaks.

<pre>
Line 1
    Line 2 with spaces
Line 3
</pre>

Line 1
    Line 2 with spaces
Line 3

12. <hr> Tag (Styled)

Purpose: Creates a horizontal line to separate content. Here we make it more visible.

<h1>Before Line</h1>
<hr style="height:5px; width:80%; 
background-color:#ff5733; border:none;">
<p>After Line</p>

Before Line

After Line

Here I tell you all attributes of HR tag

ALIGN Attribute

Definition:
The align attribute is used to specify the alignment of text or elements inside certain HTML tags (like <p>, <h1>, <div>, etc.).
It defines whether the content should appear left, center, or right on the webpage.

Syntax:

<tagname align="value">Content</tagname>

Possible Values:

left → Aligns content to the left side.
center → Aligns content to the center of the page.
right → Aligns content to the right side.
justify → Stretches text so that each line has equal width (used in paragraphs).

Note: The align attribute is not supported in modern HTML5 for most elements. It’s recommended to use CSS instead, for example:
style="text-align:center;"

Example 2: Using CSS for Alignment

<p style="text-align:center;">This text is centered using CSS.</p>

💻 Output:

This text is centered using CSS.

Heading Tags

Definition:
HTML provides six levels of heading tags — from <h1> to <h6>.
Headings are used to define titles or subtitles on a webpage. The <h1> tag represents the most important heading, and <h6> represents the least important.

Syntax:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Explanation:

<h1> — Used for the main page title.
<h2> — Used for section headings.
<h3> — Used for sub-sections.
<h4>, <h5>, <h6> — Used for smaller sub-headings or notes.

Example 1: Display of All Heading Tags

<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>

💻 Output:

This is Heading 1

This is Heading 2

This is Heading 3

This is Heading 4

This is Heading 5

This is Heading 6

Note: Search engines give more importance to <h1> tags. It’s recommended to use only one <h1> tag per webpage for SEO purposes.

Strike, Subscript and Superscript Tags

Definition:
HTML provides different tags to format text with strike-through, subscript, and superscript effects.

<strike> → Used to show text with a line through it (deprecated in HTML5, replaced by <del> or <s>).
<sub> → Displays text slightly below the normal line (used in chemical formulas).
<sup> → Displays text slightly above the normal line (used in mathematical expressions).

Syntax:

<strike>Text</strike>
<sub>Text</sub>
<sup>Text</sup>

Example 1: Strike Tag

<p>This is <strike>incorrect</strike> text.</p>

💻 Output:

This is ~~incorrect~~ text.

Example 2: Subscript Tag

<p>Water formula is H<sub>2</sub>O</p>

💻 Output:

Water formula is H₂O

Example 3: Superscript Tag

<p>Square of 4 is 4<sup>2</sup> = 16</p>

💻 Output:

Square of 4 is 4² = 16

Note:
The <strike> tag is deprecated in HTML5. Use <del> or <s> instead for strike-through text.

Marquee Tag and Its Attributes

Definition:
The <marquee> tag is used to create scrolling text or images on a webpage.
It scrolls the content horizontally or vertically within a defined area.
Note: The <marquee> tag is not supported in HTML5 — use CSS animations instead.

Syntax:

<marquee attribute="value">Scrolling Text</marquee>

Common Attributes of <marquee>:

direction → Defines the direction of scroll. Values: left, right, up, down.
behavior → Defines how the text scrolls. Values: scroll, slide, alternate.
scrollamount → Controls the speed of scrolling (higher value = faster speed).
bgcolor → Sets the background color of the marquee area.
height and width → Defines the size of the marquee box.
loop → Specifies how many times the marquee should scroll (use infinite for continuous).

Example 1: Basic Scrolling Text

<marquee>Welcome to HTML Marquee!</marquee>

💻 Output:

Welcome to HTML Marquee!

Example 2: Direction Attribute

<marquee direction="right">This text moves right</marquee>
<marquee direction="up">This text moves upward</marquee>

💻 Output:

This text moves right This text moves upward

Example 3: Behavior Attribute

<marquee behavior="alternate">This text bounces back and forth</marquee>
<marquee behavior="slide">This text slides once and stops</marquee>

💻 Output:

This text bounces back and forth This text slides once and stops

Example 4: Adding Color, Speed, and Size

<marquee bgcolor="lightblue" scrollamount="10" width="400" height="50">
Colorful and Fast Scrolling Text
</marquee>

💻 Output:

Colorful and Fast Scrolling Text

Note:
The <marquee> tag is deprecated in HTML5. Instead of using marquee, use CSS animations or JavaScript for scrolling effects.

Lists and Its Attributes

Definition:
Lists in HTML are used to display information in an organized manner. They help arrange items either in a numbered (ordered) or bulleted (unordered) format. There’s also a definition list used to show terms and their descriptions.

Types of Lists:

Ordered List (<ol>) – Displays items in a numbered sequence.
Unordered List (<ul>) – Displays items with bullets.
Definition List (<dl>) – Displays terms and their definitions.

Syntax:

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
</ol>

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

<dl>
  <dt>Term</dt>
  <dd>Definition</dd>
</dl>

Example 1: Ordered List

<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

💻 Output:

HTML
CSS
JavaScript

Example 2: Ordered List with Type Attribute

Attribute: type – Defines the numbering style (1, A, a, I, i).

<ol type="A">
  <li>India</li>
  <li>USA</li>
  <li>Japan</li>
</ol>

💻 Output:

India
USA
Japan

Example 3: Unordered List

<ul>
  <li>Apple</li>
  <li>Mango</li>
  <li>Banana</li>
</ul>

💻 Output:

Apple
Mango
Banana

Example 4: Unordered List with Type Attribute

Attribute: type – Defines the bullet style (disc, circle, square).

<ul type="square">
  <li>C</li>
  <li>C++</li>
  <li>Python</li>
</ul>

💻 Output:

C
C++
Python

Example 5: Definition List

<dl>
  <dt>HTML</dt>
  <dd>A markup language for creating web pages.</dd>

  <dt>CSS</dt>
  <dd>Used for styling HTML elements.</dd>
</dl>

💻 Output:

HTML: A markup language for creating web pages.
CSS: Used for styling HTML elements.

Other Attributes:

start → Specifies the starting number (for ordered list only).
reversed → Displays the list in reverse order.

Example 6: Start and Reversed Attributes

<ol start="5">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ol>

<ol reversed>
  <li>Red</li>
  <li>Green</li>
  <li>Blue</li>
</ol>

💻 Output:

One
Two
Three

Red
Green
Blue

Table and Its Attributes

Definition:
A table in HTML is used to display data in rows and columns. It helps to organize information clearly — for example, marks, prices, or schedules.

🧩 Table Tags and Their Definitions:

<table> → Defines the table itself.
<tr> → Defines a table row.
<th> → Defines a table header cell (bold and centered by default).
<td> → Defines a table data cell (normal cell).
<caption> → Adds a title or heading to the table.

🧾 Basic Structure of a Table:

<table>
  <caption>Student Marks</caption>
  <tr>
    <th>Name</th>
    <th>Subject</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td>Aman</td>
    <td>Math</td>
    <td>95</td>
  </tr>
  <tr>
    <td>Riya</td>
    <td>Science</td>
    <td>88</td>
  </tr>
</table>

💻 Output:

**Student Marks**
Name	Subject	Marks
Aman	Math	95
Riya	Science	88

🎨 Table Attributes:

border → Sets border thickness of table (e.g., border="1").
cellpadding → Space between cell content and cell border.
cellspacing → Space between cells.
width → Sets width of the table (e.g., width="80%").
align → Aligns table (left, center, right).
bgcolor → Sets background color of table or row.

🧮 Example Using Attributes:

<table border="2" cellpadding="10" cellspacing="5" width="80%" align="center" bgcolor="#e6ffe6">
  <caption>Employee Details</caption>
  <tr bgcolor="#99ffcc">
    <th>Name</th>
    <th>Department</th>
    <th>Salary</th>
  </tr>
  <tr>
    <td>Rohit</td>
    <td>IT</td>
    <td>₹50,000</td>
  </tr>
  <tr>
    <td>Neha</td>
    <td>HR</td>
    <td>₹45,000</td>
  </tr>
</table>

💻 Output:

**Employee Details**
Name	Department	Salary
Rohit	IT	₹50,000
Neha	HR	₹45,000

Note: In modern HTML, use CSS (like border-collapse, padding, and text-align) for better styling instead of old attributes.

Table and Its Attributes

Definition:
A table in HTML is used to display data in rows and columns. Tables can have several attributes to style and format them.

1. border Attribute

Purpose: Sets the thickness of the table border.

<table border="3">
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
</table>

💻 Output:

Row 1, Cell 1

Row 1, Cell 2

2. bgcolor Attribute

Purpose: Sets the background color of the table.

<table border="2" bgcolor="lightblue">
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>

💻 Output:

Cell 1

Cell 2

3. bordercolor Attribute

Purpose: Sets the color of the table border.

<table border="3" bordercolor="red">
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>

💻 Output:

Cell 1

Cell 2

4. background Attribute

Purpose: Sets an image as the background of the table.

<table border="2" background="background.jpg">
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>

💻 Output:

Cell 1

Cell 2

5. caption Tag

Purpose: Adds a title or caption to the table.

<table border="2">
  <caption>Student Marks</caption>
  <tr>
    <td>Math</td>
    <td>90</td>
  </tr>
</table>

💻 Output:

Student Marks
Math	90

Advanced Table Attributes & Nested Tables

1. caption Tag

Definition: The <caption> tag adds a title to the table. It appears above the table by default.

<table border="2">
  <caption>Student Marks</caption>
  <tr>
    <td>Math</td>
    <td>90</td>
  </tr>
</table>

💻 Output:

Student Marks
Math	90

2. colspan Attribute

Definition: The colspan attribute makes a cell span across multiple columns.

<table border="2">
  <tr>
    <td colspan="2">Name</td>
  </tr>
  <tr>
    <td>First</td>
    <td>Last</td>
  </tr>
</table>

💻 Output:

Name
First	Last

3. rowspan Attribute

Definition: The rowspan attribute makes a cell span across multiple rows.

<table border="2">
  <tr>
    <td rowspan="2">Subject</td>
    <td>Marks</td>
  </tr>
  <tr>
    <td>90</td>
  </tr>
</table>

💻 Output:

Subject	Marks
	90

4. Color Attributes (tr, td, th)

Definition: You can set background and text colors for rows, table headers, and table cells.

<table border="2">
  <tr bgcolor="lightblue">
    <th>Name</th>
    <th>Score</th>
  </tr>
  <tr bgcolor="lightyellow">
    <td>Ali</td>
    <td>85</td>
  </tr>
  <tr bgcolor="lightgreen">
    <td>Sara</td>
    <td>92</td>
  </tr>
</table>

💻 Output:

Name	Score
Ali	85
Sara	92

5. Nested Table

Definition: A table inside another table is called a nested table. Useful for complex layouts.

<table border="2">
  <tr>
    <td>Student</td>
    <td>
      <table border="1">
        <tr>
          <td>Math</td>
          <td>90</td>
        </tr>
        <tr>
          <td>Science</td>
          <td>95</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

💻 Output:

Student

Math	90
Science	95

Image Tag & Its Attributes

1. <img> Tag

Definition: The <img> tag is used to display images on a webpage. It is an empty tag (self-closing) and does not have a closing tag.

<img src="g.jpg" alt="Description">

💻 Output:

2. width Attribute

Definition: Sets the width of the image in pixels (or percentage).

<img src="g.jpg" width="150">

💻 Output:

3. height Attribute

Definition: Sets the height of the image in pixels (or percentage).

<img src="g.jpg" height="100">

💻 Output:

4. border Attribute

Definition: Adds a border around the image. Deprecated in HTML5; use CSS instead.

<img src="g.jpg" border="5">

💻 Output:

5. align Attribute

Definition: Aligns the image relative to surrounding text (left, right, middle). Deprecated in HTML5; CSS is recommended.

<img src="g.jpg" align="right" width="150">

💻 Output:

This is some text before the image. More text flows around the image.

Horizontal & Vertical Space

Definition: Adds space around the image using hspace (horizontal) and vspace (vertical).

<img src="g.jpg" hspace="100" vspace="50"  alt="Example Image">

💻 Output:

Text before the image.

Text after the image. The spacing around the image is now moderate using hspace and vspace.

8. alt Attribute

Definition: Provides alternative text displayed if the image cannot be loaded. Improves accessibility.

<img src="nonexistent.jpg" alt="Image not found">

💻 Output:

Image not found

Video Tag (<video>)

Definition: The <video> tag is used to embed video content in a webpage.

Common Attributes:

src → Specifies the video file.
width → Sets the width of the video player.
height → Sets the height of the video player.
controls → Displays play, pause, volume, and other controls.
autoplay → Video plays automatically when the page loads.
loop → Video repeats automatically.
muted → Starts the video muted.
poster → Displays an image before the video starts.
preload → Indicates how the browser should load the video file. Values: auto, metadata, none.

Example: Video with multiple attributes

<video src="g.mp4" width="400" height="300" controls autoplay loop muted poster="g.jpg" preload="auto">
  Your browser does not support the video tag.
</video>

💻 Output:

Notes:

attribute:You can also increase width and height by just applying width and height tag
src: Required to specify the video file.
controls: Without this, users cannot pause/play the video manually.
autoplay: Starts playing immediately; often muted by default in browsers.
loop: Repeats the video automatically.
muted: Useful for autoplay videos without sound.
poster: Image displayed before the video plays.
preload: Helps manage bandwidth by controlling loading behavior.

Audio Tag (<audio>)

Definition: The <audio> tag is used to embed audio content in a webpage.

Common Attributes:

src → Specifies the audio file.
controls → Shows play, pause, volume controls.
autoplay → Audio plays automatically.
loop → Audio repeats automatically.
muted → Audio starts muted.

<audio src="sample.mp3" controls>
  Your browser does not support the audio element.
</audio>

💻 Output:

Anchor Tag (<a>)

Definition: The <a> tag is used to create hyperlinks in HTML. It allows users to navigate to another page, section, or website.

Common Attributes of <a>:

href → Specifies the URL of the page the link goes to.
target → Specifies where to open the linked document. Values: _blank, _self, _parent, _top.
title → Text displayed as a tooltip when hovering over the link.
rel → Specifies the relationship between the current page and the linked page. Example: noopener, noreferrer.
download → Prompts the browser to download the linked file instead of opening it.

Example: Anchor Tag Linking to "AI & TECH"

<a href="AI AND TECH.htm" target="_blank" title="Visit AI & TECH" rel="noopener">
  AI & TECH
</a>

💻 Output:

AI & TECH

Notes:

href: The URL to which the link points (required).
target="_blank": Opens the link in a new tab.
title: Tooltip text when hovering over the link.
rel="noopener": Improves security for links opened in new tabs.

Form Tag (<form>)

Definition: The <form> tag is used to create an HTML form to collect user input. Forms can include text fields, checkboxes, radio buttons, dropdowns, and more.

Common Attributes of <form>:

action → Specifies the URL where form data is sent after submission.
method → Specifies the HTTP method to send data. Values: GET, POST.
enctype → Specifies how form data should be encoded. Example: multipart/form-data (used for file uploads).
name → Assigns a name to the form for scripting purposes.
target → Specifies where to display the response after submission. Values: _self, _blank, _parent, _top.
autocomplete → Enables or disables automatic input suggestions. Values: on, off.

Example: Simple Registration Form

<form action="submit.php" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br><br>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br><br>

  <label for="password">Password:</label>
  <input type="password" id="password" name="password"><br><br>

  <button type="submit">Register</button>
</form>

💻 Output:

Notes:

action: URL to which the form data is sent (required for submission).
method: Defines how data is sent: GET (URL) or POST (body).
enctype: Required for file uploads; defines data encoding type.
autocomplete: Suggests previously entered data when typing.
target: Specifies where to open the response (same tab, new tab, etc.).

HTML Form Controls Notes

Text Input Controls

Definition: Single-line text input fields allow the user to enter text data.

Example:

<form>
  Name: <input type="text" name="name">
</form>

💻 Output:

Password Input Controls

Definition: Allows users to enter a password. Characters are hidden.

Example:

<form>
  Password: <input type="password" name="password">
</form>

💻 Output:

Multi-line Text Input (Textarea)

Definition: Used to enter multiple lines of text.

Example:

<form>
  Address: <textarea name="address" rows="4" cols="30"></textarea>
</form>

💻 Output:

Checkbox Controls

Definition: Allows multiple selections from given options.

Example:

<form>
  Hobbies: 
  <input type="checkbox" name="hobby" value="reading"> Reading
  <input type="checkbox" name="hobby" value="music"> Music
</form>

💻 Output:

Radio Button Controls

Definition: Allows selecting only one option from a group.

Example:

<form>
  Gender:
  <input type="radio" name="gender" value="male"> Male
  <input type="radio" name="gender" value="female"> Female
</form>

💻 Output:

Select Box / List Box

Definition: Allows the user to select an option from a dropdown list.

Example:

<form>
  Country:
  <select name="country">
    <option>India</option>
    <option>USA</option>
    <option>UK</option>
  </select>
</form>

💻 Output:

Button Controls

Definition: Buttons are used to submit or reset forms.

Example:

<form>
  <button type="submit">Submit</button>
  <button type="reset">Reset</button>
</form>

💻 Output:

🎉 Congratulations! 🎉

You have completed your HTML journey.

Keep practicing and building amazing webpages! 💻

For Learning more programming languages click More programming languages